<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      :title="$tt('label_batch_import')"
      :visible.sync="visible"
      custom-class="dialog_big"
      destroy-on-close
    >
      <div v-loading="loading">
        <el-form label-position="top">
          <el-form-item>
            <el-button @click="uploadFile" type="primary">
              {{ $tt("label_import_excel") }}
              <i class="el-icon-upload2 el-icon--right"></i>
            </el-button>
            <el-button @click="downloadImportTemp" size="mini" type="primary">
              {{ $tt("label_download_import_template")
              }}<i class="el-icon-download el-icon--right"></i>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

    <ex_super_dialog_form
      ref="dialogImport"
      v-bind="dialogImport"
      @afterSubmitSuccess="dialogImportSubmitAfter"
      destroy-on-close
    >
    </ex_super_dialog_form>
  </div>
</template>

<script>
// import xlsx from '@/asset/xlsx.full.min.js'
// import { log } from 'shelljs/src/common';
// import ExcelJS from '@/asset/exceljs.bare.min.js'
export default {
  data() {
    return {
      visible: false,
      loading: false,

      dialogImport: {
        customClass: "dialog_auto",
        form: {
          itemClass: "form_item_default",
          inputClass: "form_input_default",
          model: [
            {
              key: "files",
              label: "label_file_upload",
              render: (h, { data }) => {
                return h(
                  "el-upload",
                  {
                    props: {
                      action: "none",
                      "auto-upload": false,
                      limit: 1,
                      "on-change": (file, files) => {
                        this.$set(data, "files", files);
                      },
                      "on-exceed": () =>
                        this.$message.error(
                          this.$tt("label_only_select_count_file", { count: 1 })
                        ),
                    },
                  },
                  [
                    <el-button slot="trigger" size="small" type="primary">
                      {this.$t("label_select_file")}
                    </el-button>,
                  ]
                );
              },
            },
          ],
          rules: {
            files: [
              {
                required: true,
                type: "array",
                message: this.$tt("tip_can_no_empty"),
                trigger: "change",
              },
            ],
          },
        },
      },
    };
  },
  methods: {
    show() {
      // this.$set(this.form, "tableList", []);
      this.visible = true;
    },
    // 下载模版
    downloadImportTemp() {
      console.log("我", window.location.origin);
      const origin = window.location.origin || "";
      window.open(
        `${origin}/oms-api/tickets/OmsBaseTicketsCatalogRpc/downloadImportTemp.json`
      );
    },
    // 导入
    uploadFile() {
      this.visible = false;
      this.$refs.dialogImport.showNew({
        title: "导入工单目录",
        data: {
          files: [],
        },
        onlySetData: true,
      });
    },
    dialogImportSubmitAfter(data) {
      this.$functionCommon({
        url: "/oms-api/tickets/OmsBaseTicketsCatalogRpc/importExcel.json",
        file: data.files[0].raw,
        commonType: "import",
      });
    },
  },
};
</script>
